<template>
  <div>
    <a-transfer
      :data-source="mockData"
      :titles="['分类', '已选分类']"
      :target-keys="targetKeys"
      :selected-keys="selectedKeys"
      :operations="['添加','删除']"
      :render="item => item.title"
      @change="handleChange"
      @selectChange="handleSelectChange"
    />
  </div>
</template>

<script>
export default {
  props:{
    articleCategoryValue:{
      type:Array
    },
    categoryType:{
      type:String
    }
  },
  data() {
    return {
      mockData:this.articleCategoryValue,
      selectedKeys:[],  // 选项数据
      targetKeys: [], // 右侧数据
      // disabled: false,
    };
  },
  methods: {
    // 右侧数据变化
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;
      // this.$emit('setFields',this.targetKeys)
      this.$emit('input',this.targetKeys)
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    }
  },
}
</script>

<style>

</style>